// @import "source-code-pro";
// @import "source-han-sans";
// @import "lxgwwenkai";
@import "fira-code";
@import "markdown";
@import "code-style";

html {
  scroll-behavior: smooth;
  font-size: 16px;
  font-family: $font-source-han-sans;
}

html,
body {
  min-width: 100%;
}

body {
  background: $background;
  transition: background 0s $animation-function $animation-duration * 2;
  color: black;

  @include dark-mode {
    color: white;
    background: $background-dark;
  }

  &.resizing {
    user-select: none;
    cursor: ew-resize;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  &.flex {
    display: flex;
    align-items: center;
  }

  &.flexc {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  &.w100 {
    width: 100%;
  }

  &.h100 {
    height: 100%;
  }

  &.s100 {
    width: 100%;
    height: 100%;
  }
}

#body {
  min-height: calc(100vh - $footer-height);
  padding-top: $header-height;
  z-index: $z-index-body;
  position: relative;
}

input,
textarea,
select {
  border: 1px solid #a1a1a1;
  transition: border $animation-duration $animation-function, box-shadow $animation-duration $animation-function;
  border-radius: 2px;
  background: #fff;
  outline: none;
  color: black;

  &:hover {
    border-color: rgb(87 87 87);
  }

  &:focus {
    box-shadow: 0 0 4px rgba($theme-color-lighten, 20%);
    border-color: $theme-color;
    background: white;
  }

  &:disabled {
    cursor: not-allowed;
    border-color: #a5a5a5;
    background: rgb(239 239 239);
  }

  @include dark-mode {
    color: white;
    background: #2d2d2d;
    border-color: rgb(116 116 116);

    &:hover {
      border-color: rgb(139 139 139);
    }

    &:focus {
      box-shadow: 0 0 4px rgba($theme-color, 20%);
      border-color: $theme-color;
      background: rgb(36 36 36);
    }

    &:disabled {
      cursor: not-allowed;
      border-color: #a5a5a5;
      background: rgb(87 87 87);
    }
  }
}

input,
textarea,
button {
  outline: none;
}

textarea {
  line-height: 25px;
  font-weight: 400;
}

img[data-viewer] {
  cursor: zoom-in;
}

.has-comment {
  border-bottom: 1px solid $theme-color-darken;

  @include dark-mode {
    border-color: $theme-color;
  }

  padding-bottom: 20px;
}

.giscus {
  margin: 30px 2px 0;
  width: unset;
}

::-webkit-scrollbar {
  background: transparent;
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgb(196 196 196);

  &:hover {
    background: rgb(150 150 150);
  }

  @include dark-mode {
    background: rgb(100 100 100);

    &:hover {
      background: rgb(150 150 150);
    }
  }
}
